<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${game.name} + ' - Steam游戏商城'">游戏详情 - Steam游戏商城</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 全局样式 */
        body {
            background-color: #1b2838;
            color: #acb2b8;
            font-family: 'Arial', sans-serif;
        }

        .container {
            max-width: 1200px;
        }

        /* 颜色定义 */
        .bg-dark {
            background-color: #171a21 !important;
        }

        .text-primary {
            color: #66c0f4 !important;
        }

        .text-accent {
            color: #5c7e10 !important;
        }

        /* 卡片样式 */
        .game-card {
            background: linear-gradient(to bottom, #2a475e 0%, #1b2838 100%);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 32px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .game-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        }

        /* 文字排版 */
        h1 {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #ffffff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        h3 {
            font-size: 1.8rem;
            color: #ffffff;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(102, 192, 244, 0.3);
            padding-bottom: 10px;
        }

        .game-info {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .game-info span:first-child {
            min-width: 80px;
            font-weight: 500;
        }

        .price {
            font-size: 1.8rem;
            font-weight: bold;
            color: #66c0f4;
            margin-top: 24px;
            margin-bottom: 16px;
        }

        .game-description {
            line-height: 1.8;
            margin-top: 24px;
            margin-bottom: 32px;
        }

        /* 图片样式 */
        .game-screenshot {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .game-screenshot:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        }

        /* 按钮样式 */
        .btn-primary {
            background: linear-gradient(to right, #5c7e10, #6fa018);
            border: none;
            padding: 12px 24px;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 6px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(92, 126, 16, 0.2);
        }

        .btn-primary:hover {
            background: linear-gradient(to right, #6fa018, #7eb31a);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(92, 126, 16, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        /* 导航和页脚 */
        .nav-link {
            color: #acb2b8;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: #66c0f4;
        }

        .footer {
            background-color: #171a21;
            padding: 32px 0;
            margin-top: 48px;
            border-top: 1px solid rgba(102, 192, 244, 0.1);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .game-card {
                padding: 16px;
            }

            h1 {
                font-size: 2rem;
            }

            .price {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header}"></div>

<div class="container mt-6">
    <!-- 游戏主信息卡片 -->
    <div class="game-card">
        <div class="row align-items-start">
            <!-- 游戏封面 -->
            <div class="col-lg-5 mb-6 mb-lg-0">
                <div class="position-relative">
                    <img
                            th:src="${game.imageUrl}"
                            class="img-fluid rounded-lg game-screenshot w-100"
                            alt="Game Cover"
                            style="height: auto; max-height: 500px; object-fit: cover;"
                    >
                </div>
            </div>

            <!-- 游戏详情 -->
            <div class="col-lg-7">
                <h1 th:text="${game.name}">游戏名称</h1>

                <!-- 游戏基本信息 -->
                <div class="game-info">
                    <span class="text-muted">类别:</span>
                    <span th:text="${game.type}" class="text-primary font-weight-bold">角色扮演</span>
                </div>

                <div class="game-info">
                    <span class="text-muted">厂商:</span>
                    <span th:text="${game.producer}" class="text-primary font-weight-bold">CD Projekt Red</span>
                </div>

                <div class="game-info">
                    <span class="text-muted">发行日期:</span>
                    <span th:text="${#temporals.format(game.launchDate, 'yyyy-MM-dd')}" class="text-white">2023-01-01</span>
                </div>

                <!-- 游戏价格 -->
                <p class="price" th:text="${'¥' + #numbers.formatDecimal(game.price, 1, 2)}">¥199.00</p>

                <!-- 游戏描述 -->
                <p class="game-description" th:text="${game.description}">
                    这是一款开放世界角色扮演游戏，玩家将体验丰富的剧情、多样的角色和沉浸式的游戏世界。游戏拥有高度自由度，玩家的每个选择都将影响故事的发展和结局。
                </p>

                <!-- 购买按钮 -->
                <form style="display: inline-block;" th:action="@{/cart/add/{gameId}(gameId=${game.id})}" method="post">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 游戏截图区域 -->
    <div class="game-card">
        <h3>游戏截图</h3>

        <div class="row">
            <div class="col-md-4 mb-4">
                <img
                        th:src="${game.image_jt1}"
                        class="img-fluid game-screenshot"
                        alt="Game Screenshot 1"
                        style="height: 200px; object-fit: cover;"
                >
            </div>
            <div class="col-md-4 mb-4">
                <img
                        th:src="${game.image_jt2}"
                        class="img-fluid game-screenshot"
                        alt="Game Screenshot 2"
                        style="height: 200px; object-fit: cover;"
                >
            </div>
            <div class="col-md-4 mb-4">
                <img
                        th:src="${game.image_jt3}"
                        class="img-fluid game-screenshot"
                        alt="Game Screenshot 3"
                        style="height: 200px; object-fit: cover;"
                >
            </div>
        </div>
    </div>
</div>

<div class="footer" th:replace="~{fragments/footer}"></div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>